<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script type="module">
        // import { watch, reactive, watchEffect } from "/node_modules/vue/dist/vue.esm-browser.js"
        import { watch, reactive, ref, watchEffect } from "./reactivity.js"


        const state = reactive({
            name: "张三",
            age: 18,
            address: {
                city: "北京",
            }
        });
        const name = ref("张三");
        // 监听响应式对象
        // watch(state, (newVal, oldVal) => {
        //     console.log(newVal, oldVal, "watch");
        // }, {
        //     deep: true,
        // });


        // 监听ref对象
        // watch(name, (newVal, oldVal) => {
        //     console.log(newVal, oldVal, "watch");
        // }, {
        //     deep: true,
        // });

        // 监听getter函数
        // watch(() => state.name, (newVal, oldVal) => {
        //     console.log(newVal, oldVal, "watch");
        // }, {
        //     deep: true, // 是否深度监听
        //     immediate: true, // 是否立即执行
        // });

        // // watchEffect 没有cb，就是执行fn ，会立即执行一次 , 自定追踪fn的依赖，当依赖发生改变时，会重新执行fn
        // watchEffect(() => {
        //     console.log(state.name, "watchEffect");
        // });

        const stop = watch(() => state.name, (newVal, oldVal) => {
            console.log(newVal, oldVal, "watch");
        }, {
            deep: true, // 是否深度监听
            immediate: true, // 是否立即执行
        });
        stop();
        setTimeout(() => {
            state.name = "李四";
            // state.address.city = "上海";
        }, 1000);

    </script>
</body>

</html>